<template>
    <div>

        <div style="text-align: center; font-size: x-large;">
            <h1>Icon 图标</h1>
        </div>
        
        <el-row class="icons">

            <el-col :span="2" v-for="(item, index) in icons">
                    
                <el-button link>
                    <div class="item-icon">
                        <el-icon :size="32">
                            <component :is="item.name" />
                        </el-icon>
                        <el-text class="mx-1" size="small">{{ item.name }}</el-text>
                    </div>
                </el-button>

            </el-col>
        </el-row>

    </div>
</template>

<script>
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { onMounted, reactive, toRefs } from 'vue';

export default {
    setup () {

        const data = reactive({
            icons: []
        })

        onMounted(() => {
            for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
                console.log(key)
                console.log(component)
                data.icons.push(component)
            }
            console.log(data.icons)
        })

        return {
            ...toRefs(data)
        }
    }
}
</script>

<style lang="scss" scoped>
    .icons {
        div {
            height: 95px;
            margin: 20px 20px;
            // background-color: adjust-hue($color: #a85a5a, $degrees: 0);
            border: 1px solid var(--el-border-color);
            border-radius: 15px;
            display: flex;
            padding: 0px;
            justify-content: center;/* 水平居中 */
            align-items: center;/* 垂直居中 */
            button {
                width: 100%;
                height: 100%;
            }
            .item-icon {
                display: grid; 
                place-self: center; 
                margin: 0; 
                width: 100%;
                height: 56px;
                border: 0px;
                i {
                    margin: 0 auto;
                }
            }
            
        }
    }

    .radius {
        height: 40px;
        width: 100%;
        
        border-radius: 0;
        // margin-top: 20px;
    }
</style>